<template>
    <div v-if="show" class="backTop flex_c_c" @click="backTop">
         <slot>回到顶部</slot>
    </div>
</template>

<script>
    export default {
        props:{
            top:{
                type:Number,
                default:800
            }
        },
        data(){
            return{
                show:false
            }
        },
        methods:{
          scrollHandle(){
            //   console.log('滚动了');
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if(scrollTop >= this.top){
                this.show = true;
            }else{
                this.show = false;
            }
          },
          backTop(){
              document.documentElement.scrollTop = document.body.scrollTop = 0; 
          }
        },
        mounted(){
            document.addEventListener('scroll',this.scrollHandle)
        },
        destroyed(){
            document.removeEventListener('scroll',this.scrollHandle)
        }
    }
</script>

<style lang="scss" scoped>
.backTop{
    position: fixed;
    right: 20px;
    bottom:50px;
    width: 50px;
    height: 40px;
    background-color: skyblue;
    border-radius: 50%;
    border:1px solid skyblue;
    box-shadow: 0 0 8px #ccc;
    color:black;
    font-size: 12px;
}
</style>